import React, { PureComponent } from "react";

class HelloWord extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      msg: "hello word",
    };
  }
  changeText() {
    this.setState({
      msg: "修改 msg",
    });
  }
  render() {
    const { msg } = this.state;
    return (
      <div>
        <h2>{msg}</h2>
        <button onClick={() => this.changeText()}>修改文本</button>
      </div>
    );
  }
}
// 函数式组件
function HelloWord2(params) {
  let message = "hello word 2";
  /**
   * 函数式组件缺陷：
   * 1.组件不会重新渲染； 修改文本时，组件本身不知道要重新渲染
   * 2.如果页面重新渲染，赋值仍然是最初的值，修改内容无效
   */
  return (
    <div>
      <h2>{message}</h2>
      <button onClick={(e) => (message = "修改 message")}>修改文本</button>
    </div>
  );
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>app</h1>
        <HelloWord />
        <HelloWord2 />
      </div>
    );
  }
}

export default App;
